import React, { Component } from 'react'
import './css/01-index.css'

export default class App extends Component {
    // myRef = React.createRef()

    state = {
        text: '',
        list: [
            {
                id: '111',
                text: '吃饭',
                isChecked: false
            },
            {
                id: '222',
                text: '睡觉',
                isChecked: false
            },
            {
                id: '333',
                text: '打豆豆',
                isChecked: false
            }
        ]
    }

    // 如果把 ref 绑在组件标签上就可以获取组件的实例对象，可以用于组件通信
    render() {
        return (
            <div>
                {/* <input ref={this.myRef} /> */}
                <input value={this.state.text} onChange={(evt) => {
                    this.setState({ text: evt.target.value })
                }} />
                <button onClick={this.handleClick2}>增加记录</button>

                <ul>
                    {this.state.list.map((item, index) =>
                        <li key={item.id}>
                            {/* {item.text} */}

                            <input type='checkbox' checked={item.isChecked}
                                onChange={
                                    (evt) => {
                                        // console.log('evt', evt.target.checked);
                                        this.handleChecked(index)
                                    }
                                } />

                            {/* {item.isChecked ? '删除' : '不删除'} */}

                            {/* 富文本展示 => 能够解析html标签 => 会执行js代码，必须足够信任才可以使用 */}
                            <span dangerouslySetInnerHTML={
                                {
                                    __html: item.text
                                }
                                // 删除线样式的写法 textDecoration: 'line-through'
                            } style={{
                                textDecoration: item.isChecked ? 'line-through' : ''
                            }}></span>

                            {/* <button style={{ marginLeft: '5px' }}>完成</button> */}

                            <button onClick={() => {
                                this.handleDelClick(index)
                            }} style={{ marginLeft: '5px' }}>删除</button>

                            {/* 另外一种写法 */}
                            {/* <button onClick={this.handleDelClick.bind(this, index)}>
                                删除
                            </button> */}
                        </li>
                    )}
                </ul>

                {/* 该方法可以使节点动态的创建和销毁 相当于vue中的 v-if */}
                {/* 条件渲染：方法一 */}
                {/* {this.state.list.length ? null : <div>暂无代办事项</div>} */}

                {/* 该方法可以使节点动态的创建和销毁 相当于vue中的 v-if */}
                {/* 条件渲染：方法二 */}
                {/* {!this.state.list.length && <div>暂无代办事项</div>} */}


                {/* 该方法是通过控制样式的显示隐藏来实现条件渲染，并没有销毁、创建组件 */}
                {/* 条件渲染：方法三 */}
                <div className={this.state.list.length ? 'hidden' : ''}>
                    暂无代办事项
                </div>

            </div>
        )
    }

    handleChecked = (index) => {
        // 不能直接修改原列表，所以拷贝一份，把拷贝的对应的布尔值取反，然后再用setState方法修改列表
        let newList = [...this.state.list]

        newList[index].isChecked = !newList[index].isChecked
        this.setState({
            list: newList
        })
    }

    // 不用箭头函数的话这里的this就指向undefined
    handleClick2 = () => {
        // 非空校验
        if (this.state.text.trim() === '') {
            window.alert('请输入内容！')
            this.setState({ text: '' })
            return
        }

        let newList = [...this.state.list] // 复杂类型 引用赋值，所以这里要用浅拷贝
        // 官方提供了这样一个方案  let b = a.slice() => slice方法不传参数等于复制变量

        newList.push({
            id: Date.now(),
            text: this.state.text
        })
        this.setState({ list: newList })
        // console.log('newList', newList);
        // 清空输入框
        this.setState({ text: '' })
    }

    // 删除todo list记录的方法
    handleDelClick = (index) => {
        let newList = this.state.list.concat() //  concat  slice ... 都可以实现浅拷贝
        // 不要直接修改状态，可能会造成不可预期的问题
        newList.splice(index, 1)
        this.setState({ list: newList })
    }
}

